<!DOCTYPE>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>用户管理</title>
    <link href="/css/style2.css" rel="stylesheet" type="text/css"/>
    <link href="/css/select.css" rel="stylesheet" type="text/css"/>
    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/jquery.idTabs.min.js" type="text/javascript"></script>
    <script src="/js/select-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        KE.show({
            id: 'content7',
            cssPath: './index.css'
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function (e) {
            $(".select1").uedSelect({
                width: 345
            });
            $(".select2").uedSelect({
                width: 167
            });
            $(".select3").uedSelect({
                width: 100
            });
        });
    </script>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="userSearch">用户管理</a></li>
    </ul>
</div>

<!--查询条件-->
<br/>
<br/>
<ul class="seachform">

    <li><label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名</label><input class="scinput" id="findName" name=""
                                                                           type="text"/></li>
    <li><label>部门</label>
        <div class="vocation">
            <select class="select3" id="deptOption">
                <option value="">请选择</option>
                <option th:each="p:${dept}" th:text="${p.departmentName}" th:value="${p.departmentName}"></option>
            </select>
        </div>
    </li>

    <li><label>&nbsp;</label><input class="scbtn" id="findUser" name="" type="submit" value="查询"/></li>

</ul>
</div>

<div class="tools">

    <ul class="toolbar">
        <li class="click"><span><img src="/images/t01.png"/></span><a href="userInsert" target="_self">添加</a></li>
        <li class="click"><img src="/images/trash.png"/></span><a href="#" onclick="deleteAll()">删除</a></li>
    </ul>
</div>
<table class="tablelist">
    <tbody>
    <tr>
        <td>
            <table class="tablelist">
                <tbody>
                <tr>
                    <td>
                        <table class="tablelist">
                            <tbody>
                            <tr>
                                <td>
                                    <table class="tablelist">
                                        <thead>
                                        <tr>
                                            <th><input id="checkAll" name="" onchange="checkAll()" type="checkbox"
                                                       value=""/></th>
                                            <th width="7%">工号<i class="sort"><img src="/images/px.gif"/></i></th>
                                            <th width="6%">姓名</th>
                                            <th width="10%">部门</th>
                                            <th width="9%">职务</th>
                                            <th width="11%">注册时间</th>
                                            <th width="5%">性别</th>
                                            <th width="10%">手机</th>
                                            <th width="12%">出生日期</th>
                                            <th width="12%">邮箱</th>
                                            <th width="13%">操作</th>
                                        </tr>
                                        </thead>

                                        <tbody id="content">
                                        <tr th:each="p:${allUser.content}">
                                            <td><input class="checkOne" name="" type="checkbox" value=""/></td>
                                            <td th:text="${p.account}"></td>
                                            <td th:text="${p.name}"></td>
                                            <td th:text="${p.departmentId}"></td>
                                            <td th:text="${p.userType}"></td>
                                            <td th:text="${p.createTime}"></td>
                                            <td th:text="${p.sex}==0?'男':'女'"></td>
                                            <td th:text="${p.mobile}"></td>
                                            <td th:text="${p.birthday}"></td>
                                            <td th:text="${p.email}"></td>
                                            <td>
                      <span><a class="tablelink" th:href="'userUpdate?id='+${p.id}">
                          <img src="/images/user_edit.png"/>修改</a>

                          <a class="tablelink" href="#" th:data="${p.account}"
                             th:onclick="deleteOne(this)"/>
                              <img src="/images/trash.png"/>删除</a></span></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>


<div class="pagin">
    <div class="message">共<i class="blue" th:text="${allUser.totalElements}">

    </i>条记录，当前显示第&nbsp;<i class="blue" th:text="${allUser.number+1}+'&nbsp;'">2&nbsp;</i>页
    </div>
    <!--current more-->
    <ul class="paginList">
        <li class="paginItem">
            <a href="javascript:volid(0);" th:if="${allUser.isFirst()}">
                <span class="pagepre"></span></a>

            <a th:href="'userSearch?page='+${allUser.number-1}" th:unless="${allUser.isFirst()}">
                <span class="pagepre"></span></a>
        </li>

        <li th:class="${allUser.number==i-1}?'paginItem current':'paginItem'"
            th:each="i:${#numbers.sequence(1,allUser.totalPages)}">
            <a th:href="'userSearch?page='+${i-1}" th:text="${i}">1</a></li>

        <li class="paginItem">
            <a href="javascript:volid(0);" th:if="${allUser.isLast()}">
                <span class="pagenxt"></span></a>

            <a th:href="'userSearch?page='+${allUser.number+1}" th:unless="${allUser.isLast()}">
                <span class="pagenxt"></span></a>
        </li>
    </ul>
</div>


<div class="tip">
    <div class="tiptop"><span>提示信息</span><a></a></div>

    <div class="tipinfo">
        <span><img src="/images/ticon.png"/></span>
        <div class="tipright">
            <p>是否确认对信息的修改 ？</p>
            <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
        </div>
    </div>

    <div class="tipbtn">
        <input class="sure" name="" type="button" value="确定"/>&nbsp;
        <input class="cancel" name="" type="button" value="取消"/>
    </div>

</div>


</div>

<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>

<script>


    $("#findUser").click(function () {
        let findName = $("#findName").val();
        let deptOption = $("#deptOption").val();
        if (findName == '' && deptOption == '') {
            alert('请选择其中一项！')
            return false
        }
        $.ajax({
            url: 'userSearchByNameAnddept',
            data: {
                name: findName,
                dept: deptOption
            },
            success: function (data) {

                console.log(data[0] == null);
                let tr = ""
                if (data[0] == null) {

                } else {
                    for (let index in data) {
                        tr = tr + `<tr >
                        <td><input name="" type="checkbox" value="" class="checkOne"/></td>
                        <td>${data[index].account}</td>
                        <td>${data[index].name}</td>
                        <td>${data[index].departmentId}</td>
                        <td>${data[index].userType}</td>
                        <td>${data[index].createTime}</td>
                        <td>${data[index].sex == 1 ? '男' : '女'}</td>
                        <td>${data[index].mobile}</td>
                        <td>${data[index].birthday}</td>
                        <td>${data[index].email}</td>
                        </td>
                        <td><span><a href="userUpdate?id=${data[index].id}" className="tablelink">
                        <img src="/images/user_edit.png"/>修改</a> <a
                            href="#" className="tablelink" onClick="deleteOne(this)"
                            th:data="${data[index].account}"> <img
                            src="/images/trash.png"/>删除</a></span></td>
                    </tr>`
                    }
                }
                $(".pagin").hide()
                $("#content").html(tr)
            }
        })
    })

    function checkAll() {
        for (let i = 0; i < $(".checkOne").length; i++) {
            $(".checkOne")[i].checked = $("#checkAll")[0].checked
        }
    }

    function deleteOne(target) {
        let boo = confirm("确定删除？");
        if (boo == false) {
            return
        }
        $.ajax({
            url: 'deleteOne',
            data: {
                account: target.getAttribute("data"),
            },
            success: function () {
                alert('删除成功！')
                location.reload()
            }
        })
    }

    function deleteAll() {
        let boo = confirm("确定删除？");
        if (boo == false) {
            return
        }
        let tr = $(".checkOne:checked").parent().parent().find('a:eq(1)')
        if (tr.length == 0) {
            alert('请选择删除的选项！')
            return
        }
        for (let i = 0; i < tr.length; i++) {
            $.ajax({
                url: 'deleteOne',
                data: {
                    account: tr[i].getAttribute("data"),
                },
                success: function () {
                    location.reload()
                }
            })
        }
        alert('删除成功！')
        location.reload()

    }
</script>
</html>


